<template>
	<view class="share_page">
		<view :style="'height:'+statusBarH+'px'" style="background-color: #FF6666;"></view>
		<view class="head">
			<!-- <image src="../../static/zhouWei-navBar/icon_back_white.png" mode="" @click="goBack"></image> -->
			<view>邀请好友</view>
			<button class="header_share"  @click="set_share">分享</button>
		</view>
		<view class="share_content">
			<view class="share_image">
				<image :src="haiBaoImg" mode=""></image>
			</view>
		</view>
		<view class="share_popup" v-if="sharePopup">
			<view class="share_bg" @click="sharePopup = false"></view>
			<view class="share_like">
				<view class="share_like_title">分享到</view>
				<view class="n_icon" @click="sharePopup = false">
					<image src="/static/image/icon/icon_close.png" mode=""></image>
				</view>
				<view class="share_like_list">
					<view class="shar_like_item" @click="shareWechat">
						<view class="n_icon">
							<image src="/static/image/icon/icon_wechat.png" mode=""></image>
						</view>
						<view class="share_name">微信</view>
					</view>
					<view class="shar_like_item" @click="sharePengYouQuan">
						<view class="n_icon">
							<image src="/static/image/icon/icon_circle_of_friends.png" mode=""></image>
						</view>
						<view class="share_name">朋友圈</view>
					</view>
					<view class="shar_like_item" @click="shareQQ">
						<view class="n_icon">
							<image src="/static/image/icon/icon_qq.png" mode=""></image>
						</view>
						<view class="share_name">QQ</view>
					</view>
					<view class="shar_like_item" @click="saveImg">
						<view class="n_icon">
							<image src="/static/image/icon/icon_share_photos.png" mode=""></image>
						</view>
						<view class="share_name">图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let bgImg = ''
	import Api from '@/common/api';
	
	export default {
		data() {
			return {
				statusBarH: uni.getStorageSync('statusBarH'),
				bgImg: bgImg,
				sharePopup: false,
				haiBaoImg: "",
			};
		},
		async onShow() {
			let userinfo = uni.getStorageSync('userInfos')
			if(userinfo.avatar == null || userinfo.avatar == undefined){
				uni.showToast({
					icon: 'none',
					title:'请更新二维码'
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pagesU/set/set'
					})
				},2000)
			}else{
				this.haiBaoImg = userinfo.avatar;
			}
		},
		methods: {
			goBack(){
				uni.navigateTo({
					url:'/pages/index/user'
				})
			},
			set_share() {
				uni.showToast({
					icon: 'none',
					title:'请稍后'
				})
				var img = this.haiBaoImg;
				var that = this;
				var xia = plus.downloader.createDownload(img, {}, function(d, status) {
					if (status == 200) {} else {
						plus.nativeUI.toast('海报获取失败');
					}
					var message = {
						title: '分享标题',
						content: '分享内容',
						pictures: [d.filename]
					}
					plus.share.sendWithSystem(message, function(a) {

					}, function(e) {

					});
				});
				xia.start();
			},

			// 分享到微信
			shareWechat() {
				var that = this;
				if (this.haiBaoImg != '') {
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 2,
						imageUrl: that.haiBaoImg,
						success: function(res) {
							//console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							//console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			},

			// 分享到朋友圈
			sharePengYouQuan() {
				var that = this;
				if (this.haiBaoImg != '') {
					uni.share({
						provider: 'weixin',
						scene: 'WXSenceTimeline',
						type: 2,
						imageUrl: that.haiBaoImg,
						success: function(res) {
							//console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							//console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			},

			// 分享到QQ
			shareQQ() {
				var that = this;
				if (this.haiBaoImg != "") {
					uni.share({
						provider: 'qq',
						type: 2,
						Scene: 'WXSenceTimeline',
						title: '妙街',
						imageUrl: that.haiBaoImg,
						success: function(res) {
							//console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							//console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: '分享失败',
								position: 'bottom'
							});
						}
					});
				}
			},

			// 保存到本地
			saveImg() {
				var that = this;
				if (this.haiBaoImg != "") {
					uni.downloadFile({
						url: that.haiBaoImg,
						success: res => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										});
									},
									fail: function() {
										uni.showToast({
											title: '保存失败，请稍后重试',
											icon: 'none'
										});
									}
								});
							}
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.share_page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F0F2F5;

		.head {
			color: #FFFFFF;
			background-color: #FF6666;
			font-size: 36upx;
			text-align: center;
			height: 90upx;
			line-height: 90upx;
			image{
				width: 43upx;
				height: 43upx;
			}
			.header_share{
				position: fixed;
				top:550upx;
				right:0;
				z-index: 9999;
				// margin: 20upx;
				background-color: #8D79FE;
				color: #FFFFFF;
				width: 140upx;
				border-radius: 40upx 0 0 40upx;
			}
		}

		.share_content {
			flex: 1;
			&::before {
				content: "";
				display: table;
			}

			&::after {
				content: "";
				display: table;
			}

			position: relative;

			.share_content_bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				// 背景模糊
				background: inherit;
				-webkit-filter: blur(25upx);
				-moz-filter: blur(25upx);
				-o-filter: blur(25upx);
				-ms-filter: blur(25upx);
				filter: blur(25upx);

				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}

			.haiBo_banner {
				z-index: 998;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				.banner_box {
					width: 100%;
					height: 800upx;
				}
			}

			.share_image {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}

		// 分享弹出框
		.share_popup {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			width: 100vw;

			.share_bg {
				z-index: 1000;
				position: absolute;
				left: 0;
				top: 0;
				height: 100vh;
				width: 100vw;
				background-color: rgba(41, 46, 51, .4);
			}

			.share_like {
				z-index: 1001;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100vw;
				width: 100%;
				height: 320upx;
				box-shadow: 0upx -2upx 20upx 6upx rgba(0, 0, 0, 0.1);
				border-radius: 30upx 30upx 0upx 0upx;
				background-color: #FFFFFF;
				padding-left: 40upx;
				padding-right: 40upx;
				box-sizing: border-box;

				&::before {
					content: "";
					display: table;
				}

				&::after {
					content: "";
					display: table;
				}

				&>.n_icon {
					position: absolute;
					right: 30upx;
					top: 30upx;
					width: 32upx;
					height: 32upx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 32upx;
						height: 32upx;
					}
				}

				.share_like_title {
					width: 100%;
					margin-top: 40upx;
					text-align: center;
					font-size: 36upx;
					line-height: 36upx;
				}

				.share_like_list {
					margin-top: 30upx;

					display: flex;
					justify-content: space-between;
					align-items: center;

					.shar_like_item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.n_icon {

							width: 100upx;
							height: 100upx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100upx;
								height: 100upx;
							}
						}

						.share_name {
							margin-top: 20upx;
							font-size: 28upx;
							line-height: 28upx;
						}
					}
				}
			}
		}
	}
</style>
